 <template lang="html">
  <div class="">

    <div class="search">
        <div class="input">
            <p>
                <el-button type="primary" @click="goback">
                    返回上一级
                </el-button>
            </p>


        </div>
        <div>
               <p>
                <label for="">属性名称：</label>
                <el-input :value="$route.query.name" readonly placeholder="请输入内容"></el-input>
            </p>
        </div>
    </div>
    <div class="add">
      <el-button type="primary" @click="add">新增属性</el-button>
      <el-button type="danger" @click="del(1)">批量删除</el-button>
    </div>
    <tableVue :list="list" :state="true" v-loading="listLoading" :total="total"  @changeData="selectionVal" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="compile(scope.row)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="del(scope.row,2)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
    <!-- 新增编辑弹窗 -->
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        >
        <el-form class="demo-ruleForm" label-width="120px">
            <el-form-item label="商品属性名：" class="addItem">
                <el-input value="" v-model="addData.attrValName" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="排序：" class="addItem" >
                <el-input value="" v-model="addData.ordinal" placeholder="请输入内容"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="subForm">{{isAdd?"确定":'更新'}}</el-button>
        </span>
    </el-dialog>
    <!-- 属性详情弹窗 -->

  </div>
</template>

<script>
import {
  attrLists,
  attrNameDetails,
  editAttrName,
  AttrValDetails,
  editAttrVal,
  getAttrValueList,
  editAttrValue
} from "@/api/shoppingCentre/shoppingCentre";
import tableVue from '@/components/alltable.vue'
import Data from './attrValData.js'
export default {
    components:{
        tableVue
    },
    data(){
        return  JSON.parse(JSON.stringify(Data))
    },
    mounted () {
        this.getList();

    },
    methods:{
        getList(data){//列表数据
            let obj ={
               attrNameId: this.$route.query.attrId
            }
            getAttrValueList(obj).then(res=>{
              console.log(res);
                if(res.data.code =="OK"){
                    this.listLoading =false;
                    this.total = res.data.data.total;
                    this.list.tbody = res.data.data;

                }else{
                    this.listLoading =false;
                    this.$message.error(res.data.message)
                }
            })
        },
        add(){ //新增
            this.isAdd =true;
            this.dialogVisible =true;
            this.addData.attrValName="";
            this.addData.ordinal="";
            this.addData.attrNameId="";
             let obj ={
               attrValName:this.addData.attrValName,
               ordinal:this.addData.ordinal,
               attrNameId:this.$route.query.attrId
            }
        },
        subForm(){ //新增编辑 conform
            let obj ={
               attrValName:this.addData.attrValName,
               ordinal:this.addData.ordinal,
               attrNameId:this.$route.query.attrId
            };
            this.isAdd==false&&(obj.attrValId = this.addData.attrValId);
            let method ;
            console.log(obj)
            this.isAdd?method="POST":method="PUT";
            editAttrValue(obj,method).then(res=>{
                if(res.data.code=="OK"){
                    if(this.isAdd){
                         this.$message.success('新增成功!');
                    }else{
                        this.$message.success('更新成功!');
                    }
                    this.dialogVisible = false;
                    this.getList();
                }else{
                    this.$message.error(res.data.message);
                    this.dialogVisible = false;
                }
            })
        },
        del(type){ //删除
            if(type==1){
                if(this.selectArr.length>0){
                    this.delMessage(()=>{
                        let arr =[];
                        this.selectArr.map(item=>{
                            arr.push(item.attrNameId)
                        });

                        editAttrValue(arr,"DELETE").then(res=>{
                        if(res.data.code=="OK"){
                            this.$message.success('删除成功！');
                            this.getList();
                        }else{
                            this.$message.error(res.data.message);
                        }
                    })
                    })
                }else{
                    this.$message.error('请选择需要删除的条目！ ')
                }
            }else{
                this.delMessage(()=>{
                    let obj=[type.attrValId]
                    editAttrValue(obj,"DELETE").then(res=>{
                        if(res.data.code=="OK"){
                            this.$message.success('删除成功！');
                            this.getList();
                        }else{
                            this.$message.error(res.data.message);
                        }
                    })
                })
            }
        },
        search(){//搜索
            let obj ={
                attrName:this.searchData.attrName
            };
            this.getList(obj);
        },
        compile(data){//编辑

            this.isAdd =false;
            this.addData.attrValId =data.attrValId;
            this.dialogVisible =true;
            this.addData.attrValName = data.attrValName
            this.addData.ordinal = data.ordinal
            this.addData.attrNameId = this.$route.query.attrId;
        },
        attrDetails(data){//属性详情

        },
        selectionVal(val){
           this.selectArr = val;
        },

        handSize(){

        },
        handleClose(){
            this.dialogVisible =false;
        },
        goback(){
            this.$router.push("/shoppingCentre/shoppingCenter/attribute")
        }

    }
}
</script>

<style scoped>
    .search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;

}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;


}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
.region{
	width:120px;
}

</style>
